<template>
<div style="height:700px">
<div style="width: 26%; height: 99%; box-shadow: 3px 3px 10px #9c9c9c; float: right;margin-right:1%"
         v-if="haveVideo == '1' || haveAi == '1'">
      <div v-bind:style="{width:sWidth,height: sHeight}">
        <div v-show="time==1||time==3" class="videointerface" v-bind:style="{width:vWidth,height: vHeight}">
          <div style="width: 100%;background-color: #65a0fe;display: flex;align-items:center;"
               v-bind:style="{height: topHeight}">
            <img style="max-width:100%;max-height:100%;margin-left:5%" src="../assets/image/agentVedio.png"/>
            <p style="color: white;width: 81%;font-size: 0.23rem">视频座席</p>
          </div>

          <div class="videointerface_deta" id="videoPrefecture" style="width:100%;position:relative;overflow:hidden;"
               v-bind:style="{height: midHeight}">
            <div id="coverbg"
                 style="position:absolute;width: 100%;height:100%;background:#a9a9ab;z-index:3;display:block;"></div>
            <div id="youviewvideo" style="position:absolute;width: 100%;height:100%;background:#a9a9ab;">
              <video id="youview" autoplay="" muted playsinline=""
                     style="height:100%;width:100%;object-fit: fill;"></video>
            </div>
            <div class="oneVideo" id="oneyousvideo" style="position:absolute;width: 100%;background:black;"
                 v-bind:style="{top:viewtop,right:0,height:oneVideoheight}">
              <video id="yousVideo" autoplay="" muted playsinline=""
                     style="height:100%;width:100%;object-fit: fill;"></video>
            </div>
            <div class="oneVideo" id="twomesVideo" style="position:absolute;width:100px;height: 75px;background:black;"
                 v-bind:style="{top:viewtop,right:0}">
              <video id="mesVideo" autoplay="" muted playsinline=""
                     style="width:100%;height:100%;object-fit: fill;"></video>
            </div>
          </div>
        </div>
        <div v-show="time==2||time==3" class="aiinterface" v-bind:style="{width:vWidth,height: aHeight}">
          <div style="width: 100%;background-color: #65a0fe;display: flex;align-items:center;"
               v-bind:style="{height: topHeight}">
            <img style="max-width:100%;max-height:100%;margin-left:5%" src="../assets/image/AIAgent.png"/>
            <p style="color: white;width: 81%;font-size: 0.23rem">AI助手</p>
          </div>
          <div class="aiintercontain" style="width:100%;overflow-y: auto;" ref="scroller"
               v-bind:style="{height: midHeight}">
            <div style="margin: 10px 15px 0px 15px;" v-for="(item,index) in screenAiContent" :key="index">
              <div v-show="'asrResp'==item.direction" class="ai_cus">
                <div class="ai_cus_info">
                  <div class="ai_cus_infodetail">
                    <img src="../assets/image/cusHead.png" title="客户头像" class="ai_cus_infoimg"/>
                    <p class="ai_cus_infoname">&nbsp;&nbsp;&nbsp;<span>{{item.customPhone}}</span></p>
                    <p class="ai_cus_infotime">{{item.time}}</p>
                  </div>
                </div>
                <div class="ai_cus_dialotria"></div>
                <p class="ai_cus_dialofont">{{item.data}}</p>
              </div>
              <div v-show="'asrBegin'==item.direction" class="ai_staff">
                <div class="ai_staff_info">
                  <div class="ai_staff_infodetail">
                    <p class="ai_staff_infotime">{{item.time}}</p>
                    <p class="ai_staff_infoname">{{item.name}}-<span>{{item.agentNo}}</span></p>
                    <div class="ai_staff_infobk">
                      <img src="../assets/image/customerService.png" class="ai_staff_infoimg"/>
                    </div>
                  </div>
                </div>
                <div class="ai_staff_dialotria"></div>
                <div style="clear:both"></div>
                <p class="ai_staff_dialofont">{{item.data}}</p>
                <div style="clear:both"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-bind:style="{width:xWidth,height: xHeight}" v-if="haveVideo == '1' && haveAi == '1'">
        <el-tabs tab-position="bottom" stretch @tab-click="changeTabs" v-model="tabName">
            <el-tab-pane label="视频座席" name="1"> </el-tab-pane>
            <el-tab-pane label="AI助手" name="2"></el-tab-pane>
            <el-tab-pane label="视频座席/AI助手" name="3"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    </div>
</template>

<script>
export default {
  name: 'VideoAndAiPage',
  components:{
    
  },
  data () {
    return {
          haveVideo:'0',
          haveAi:'0',
          vWidth: "100%",
        vHeight: "100%",
        aHeight: "100%",
        sWidth: "100%",
        sHeight: "93%",
        xWidth: "100%",
        xHeight: "6%",
        topHeight: "10%",
        midHeight: "90%",
        oneVideoheight: "100%",
        screenAiContent: [],
        time: 3,
        viewtop: "0",
        tabName: '1',
    }
  },
  methods:{
        //获取AI内容
      initAiContent: function (param) {
      //   if(param.customPhone != this.currentCallPhone){
      //     let custDate = {
      //       telephone:param.customPhone,
      //       aiParam:param,
      //     };
      //     this.$store.commit('addAIData', custDate);
      //     return;
      //   }
        if (this.screenAiContent.length < 1) {
          this.screenAiContent.push(param);
          return;
        }
        let index = param.index;
        let direction = param.direction;
        for (let i = this.screenAiContent.length - 1; i >= 0; i--) {
          if (this.screenAiContent[i].index == index && this.screenAiContent[i].direction == direction) {
            this.$set(this.screenAiContent, i, param);
            // this.screenAiContent[i] = param;
            return;
          }
          if (this.screenAiContent[i].index == (index - 1) && this.screenAiContent[i].direction == direction) {
            break;
          }
        }
        this.screenAiContent.push(param);
      },
        //初始化视频
      initAgentVideo: function () {
        let constraints = {
          audio: true,
          video: {
            faceMode: 'user'
          }
        };
        let that = this;
        let meV = document.getElementById("mesVideo");
        if (!meV) {
          return;
        }
        meV.setAttribute('autoplay', '');
        meV.setAttribute('playsinline', '');
        that.meVideo = meV;
        let youV = document.getElementById("yousVideo");
        youV.setAttribute('autoplay', '');
        youV.setAttribute('playsinline', '');
        let youview = document.getElementById("youview");
        youview.setAttribute('autoplay', '');
        youview.setAttribute('playsinline', '');
        let coverbg = document.getElementById("coverbg");
        coverbg.style.display = "none";
        let youviewvideo = document.getElementById("youviewvideo");
        youviewvideo.style.filter = "blur(30px)";
        navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
          meV.srcObject = stream;
          document.body.addEventListener('click', function () {
            meV.play();
          });
          // 等到视频流准备好了
          let interval = setInterval(function () {
            if (!meV.videoWidth) {
              return;
            }
            //stage.appendChild(videoView);
            clearInterval(interval);
          }, 1000 / 50);
        }).catch(function (error) {
          //alert(error.message);
        });
      },
      refresh: function (callInPhone) { 
        
      //   this.haveAi = this.agentInfo.isAiAssistant;
      //   this.haveVideo = this.agentInfo.isSupportVideo;
        if (this.haveAi == '1' || this.haveVideo == '1') {
      //     this.screenWidth.width = '72%';
      //     this.wolistWidth.width = '30%';
      //     this.woconWidth.width = '69%';
          this.sHeight = "100%";
          this.xHeight = "0%";
          this.viewtop = "25%";
        }
        if (this.haveAi == '1' && this.haveVideo == '1') {
          this.time = 3;
          this.vHeight = "50%";
          this.aHeight = "50%";
          this.sHeight = "93%";
          this.xHeight = "6%";
          this.topHeight = "10%";
          this.midHeight = "90%";
          this.viewtop = "0";
          this.oneVideoheight = "100%";
        } else if (this.haveAi == '1') {
          this.time = 2;
          this.vHeight = "100%";
          this.aHeight = "100%";
          this.topHeight = "5%";
          this.midHeight = "95%";
          this.viewtop = "0";
          this.oneVideoheight = "50%";
        } else if (this.haveVideo == '1') {
          this.time = 1;
          this.vHeight = "100%";
          this.aHeight = "100%";
          this.topHeight = "5%";
          this.midHeight = "95%";
          this.viewtop = "25%";
          this.oneVideoheight = "50%";
        }
      },
      //AI视频座席进行点击
      changeTabs: function (tab) {
        this.time = tab.name;
        if (this.time == 1 || this.time == 2) {
          this.vHeight = "100%";
          this.aHeight = "100%";
          this.topHeight = "5%";
          this.midHeight = "95%";
          this.viewtop = "25%";
          this.oneVideoheight = "50%";
        } else if (this.time == 3) {
          this.vHeight = "50%";
          this.aHeight = "50%";
          this.topHeight = "10%";
          this.midHeight = "90%";
          this.viewtop = "0";
          this.oneVideoheight = "100%";
        }
      },
      //释放视频资源
      clearAgentVideo: function () {
        if (this.meVideo != null && this.meVideo.srcObject != null) {
          this.meVideo.pause();
          this.meVideo.srcObject.getTracks()[0].stop();
          this.meVideo.srcObject.getTracks()[1].stop();
          this.meVideo.srcObject = null;
        }
        let youviewvideo = document.getElementById("youviewvideo");
        youviewvideo.style.filter = "blur(0px)";

        let coverbg = document.getElementById("coverbg");
        coverbg.style.display = "block";
      },
      //开始视频
      doAgentVideo: function (param) {
            if(this.haveVideo != '1'){
                  return;
            }
        let that = this;
        console.log('doAgentVideo - ', param);
        let coverbg = document.getElementById("coverbg");
        coverbg.style.display = "none";
        let youviewvideo = document.getElementById("youviewvideo");
        youviewvideo.style.filter = "blur(30px)";
        let youV = document.getElementById("yousVideo");
        youV.srcObject = param;
        let youview = document.getElementById("youview");
        youview.srcObject = param;

        document.body.addEventListener('click', function () {
          that.meVideo.play();
        });
        // 等到视频流准备好了
        var interval = setInterval(function () {
          if (!that.meVideo) {
            return;
          }
          clearInterval(interval);
        }, 1000 / 50);
      },
      videoInit(){
            this.haveVideo = localStorage.getItem('haveVideo');
            this.haveAi = localStorage.getItem('haveAi');
            if(this.haveVideo == '1'){
                  this.initAgentVideo();
            }
            //   this.refresh();
            if(this.haveVideo == '1' && this.haveAi == '1'){
                  this.tabName = '3';
            }else{
                  if(this.haveVideo == '1'){
                        this.tabName = '1';
                  }
                  if(this.haveAi == '1'){
                        this.tabName = '2';
                  }
            }
            this.changeTabs({name:this.tabName});
      }
  },
  mounted(){
  },
  beforeDestory(){
        this.clearAgentVideo();
  }
}
</script>

<style scope>
.ai_cus{
    margin:10px 15px 0px 15px;
}
  .ai_cus_info{
      overflow:hidden;
  }
  .ai_cus_infodetail{
      float:left;display: flex;align-items:center;margin-left:5px;
  }
  .ai_cus_infoimg{
      width:48px;margin-right:10px;
  }
  .ai_cus_infoname{
    color:#8e8e8d;margin-right:10px;
  }
  .ai_cus_infotime{
    color:#c1c1c0;
  }
  .ai_cus_dialotria{
    width: 0;height: 0;border-right: 5px solid transparent;border-left: 5px solid transparent;border-bottom: 5px solid #f3f3f3;margin-left:20px;
  }
  .ai_cus_dialofont{
    background-color:#f3f3f3;padding: 10px 20px;border-radius:10px;letter-spacing:2px;display:inline-block; *display:inline; *zoom:1;
  }
.ai_staff{
    margin:10px 15px 0px 15px;
}
  .ai_staff_info{
    overflow:hidden;
    margin-bottom: 10px;
  }
  .ai_staff_infodetail{
    float:right;display: flex;align-items:center;margin-right:5px;
  }
  .ai_staff_infotime{
    color:#c1c1c0;margin-right:10px;
  }
  .ai_staff_infoname{
    color:#8e8e8d;margin-right:10px;
  }
  .ai_staff_infobk{
    width:50px;height:50px;background-color:#65A0FE;border-radius: 50%;position:relative;
  }
  .ai_staff_infoimg{
    border-radius:50%;width:48px;height:48px;margin-left:10px;position:absolute;left:50%;top:50%;margin-left:-24px;margin-top:-24px
  }

  .ai_staff_dialotria{
    width: 0;height: 0;border-right: 5px solid transparent;border-left: 5px solid transparent;border-bottom: 5px solid #2db7f5;float:right;margin-right:10px;
  }
  .ai_staff_dialofont{
    background-color:#65A0FE;padding: 10px 20px;color:white;border-radius:10px;letter-spacing:2px;float:right;display:inline-block; *display:inline; *zoom:1;
  }

</style>